<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #info{
            width: 200px;
            height: 200px;
            background: #ccc;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
      function sendAjax(){
        // 1.创建一个XMLHttpRequest对象
        var xhr = new XMLHttpRequest()

        // 2.绑定状态改变的事件
        xhr.onreadystatechange = function(){
            // 判断最终的状态
            if(xhr.readyState == 4 && xhr.status == 200){
                // 获取响应体
                // var result = xhr.responseText
                // console.log(result, typeof result) // string

                // var user = JSON.parse(result)
                // document.getElementById('info').innerText = `姓名：${user.name}，年龄：${user.age}，身高：${user.height}，出生日期：${user.birthday}`

                var result = JSON.parse(xhr.responseText)
                // console.log(result)
                if (result.status != 200){
                   alert(result.msg)
                }else{
                    var users = result.data
                    for(var user  of users){
                        console.log(user)
                    }
                }
            }
        }

        // 3.与服务器建立连接
        xhr.open('get', 'register?name=tom')

        // 4.发送请求
        xhr.send()
      }

      function sendAjax2(){
        $.ajax({
            type: 'get',
            url: 'register',
            data: {
                name: 'alice'
            },
            dataType: 'json',
            success: function(result){
                console.log(result)
            }
        })
      }
    </script>
</head>
<body>
  <button type="button" onclick="sendAjax()">发送Ajax请求</button>
  <button type="button" onclick="sendAjax2()">使用jQuery发送Ajax请求</button>

  <div id="info"></div>
</body>
</html>